import BaseGroup from '@/components/js/BaseGroup'
import { EventBus } from '@/store/index'
import { COMPONENT_TYPES } from '@/common/const-wb'
import { addEvent, removeEvent } from '@/plugins/dom'
import { getCompIdByParam } from '@/plugins/utils'

export default class MenuByBtns extends BaseGroup {
  constructor() {
    super();
    //子类覆盖

    this.componentBtns = [];
    this.relateEventCompId = null
    this.relateComps = []
  }

  start() {
    _.forEach(this.components, (compData) => {
      if (compData.cid == COMPONENT_TYPES.wb_btn) {
        this.componentBtns.push(compData);
      }
    })
    this.componentBtns = _.sortBy(this.componentBtns, (compData) => {
      return Number(compData.commonAttr.itemIndex);
    });
    this.relateEventCompId = this.commonAttr.relateEventCompId
    let relateAttrCompId = getCompIdByParam(this.commonAttr.relateAttrCompId)
    if (relateAttrCompId) {
      this.relateAttrComp = this.componentMap[relateAttrCompId]
    }

    this.addClickEvent();
    if (this.item.interactionData) {
      //{"isDefaultSelectedItemIndex":true,"defaultSelectedItemIndex":0}
      const injectJsClassObj = this.item.interactionData.injectJsClassObj;
      let relateIds = injectJsClassObj.relateIds.split(',')
      if (relateIds) {
        _.forEach(relateIds, relateId => {
          let comp = this.componentMap[relateId]
          this.relateComps.push(comp)
        })
      }
      let isDefaultSelectedItemIndex = injectJsClassObj.isDefaultSelectedItemIndex;
      if (isDefaultSelectedItemIndex) {
        let defaultSelectedItemIndex = 0;
        let isRecord = injectJsClassObj.isRecord
        let constNum = injectJsClassObj.constNum || 10
        if (injectJsClassObj.defaultSelectedItemIndex >= 0) {
          if(isRecord){
            defaultSelectedItemIndex = this.item.commonAttr.itemIndex >=0 ? this.item.commonAttr.itemIndex : injectJsClassObj.defaultSelectedItemIndex;
          }else{
            defaultSelectedItemIndex = injectJsClassObj.defaultSelectedItemIndex;
          }
        }
        const defaultSelectedCompData = this.componentBtns[defaultSelectedItemIndex];
        const compId = defaultSelectedCompData.id;
        EventBus.$emit("btnStatus", { isSelected: true, compId });
        this.store.commit('updateFormValue', { id: this.item.id, value: defaultSelectedCompData.commonAttr.itemIndex });
        this.store.commit("updateComponentAttr", { id: this.item.id, commonAttr: { itemIndex: defaultSelectedCompData.commonAttr.itemIndex } });
        if(this.componentMap[compId].events.frontEvents){
          const relateCompId = getCompIdByParam(this.componentMap[compId].events.frontEvents.comps[1].attrs.relateCompId);
          if (relateCompId) {
            this.cb = window.setInterval(() => {
              if (this.componentMap[relateCompId].isCreated) {
                EventBus.$emit("itemClick", { id: compId, index: defaultSelectedItemIndex });
                window.clearInterval(this.cb);
              }
            }, this.siteInfo.reloadTime);
          }
        }
        this.changeRelateComp(defaultSelectedItemIndex)
        if(isRecord){
          let groupEle = document.getElementById(this.item.id)
          let defaultELe = document.getElementById(compId)
          if(defaultELe.offsetTop >= groupEle.clientHeight - constNum){
            groupEle.scrollTo({top: defaultELe.offsetTop, behavior: 'smooth'})
          }
        }
      }
    }
  }

  addClickEvent() {
    _.forEach(this.componentBtns, (compData) => {
      if (compData.cid == COMPONENT_TYPES.wb_btn) {
        let btn = compData.vueContainer.$refs.btn.$el;
        this.onBtnClick = this.onBtnClick.bind(this);
        addEvent(btn, "click", this.onBtnClick);
      }
    })
  }

  onBtnClick(e) {
    e.stopPropagation();
    let btn = e.currentTarget;
    let compId = btn.parentElement.id;
    let compData = this.componentMap[compId];
    EventBus.$emit("btnStatus", { isSelected: false });
    EventBus.$emit("btnStatus", { isSelected: true, compId });
    const itemIndex = compData.commonAttr.itemIndex;
    this.store.commit('updateFormValue', { id: this.item.id, value: itemIndex });
    this.store.commit("updateComponentAttr", { id: this.item.id, commonAttr: { itemIndex } });
    EventBus.$emit("itemClick", { id: compId, index: itemIndex });
    if (this.relateEventCompId) {
      this.relateEventCompId = getCompIdByParam(this.relateEventCompId)
      const compData = this.componentMap[this.relateEventCompId]
      const relateId = compData.events.interactionData.comps[1].attrs.value
      EventBus.$emit("itemClick", { id: this.relateEventCompId });
      if (relateId) {
        // 更新动态文本数据， 站点2462 现在是如何区分这个数据比较好呢
        EventBus.$emit("refreshDynamicData")
      } else {
        this.onRadio(compData, itemIndex)
      }
    }
    this.changeRelateComp(itemIndex)
  }

  onRadio(compData, index) {
    // 任意单选位置操作
    let lists = compData.interactionData.lists
    _.forEach(lists, item => { _.merge(item, JSON.parse(item.params)) })
    let interactionData_ = _.cloneDeep(this.store.state.interactionData);
    interactionData_.clickCompIdMap.set(this.item.id, lists[index])
    this.store.commit('updateInteractionData', interactionData_);
    // 直接点击下一步操作
    if (interactionData_.isEmitClick) {
      EventBus.$emit("itemClick", { id: compData.id, index });
    }
  }


  changeRelateComp(itemIndex) {
    if (this.relateAttrComp) {
      if (this.relateComps && this.relateComps.length > 0) {
        if (this.relateAttrComp.interactionData) {
          let lists = this.relateAttrComp.interactionData.lists
          _.forEach(this.relateComps, comp => {
            if (comp.cid === COMPONENT_TYPES.wb_img) {
              let url = lists[itemIndex].url
              this.store.commit("updateComponentAttr", { id: comp.id, commonAttr: { url } })
            } else if (comp.cid === COMPONENT_TYPES.wb_text) {
              let text = lists[itemIndex].text
              this.store.commit("updateComponentAttr", { id: comp.id, commonAttr: { text } })
            }
            EventBus.$emit("refreshDynamicData")
          })
        }
      }
    }
  }

  destroy() {
    super.destroy();

    EventBus.$emit("btnStatus", { isSelected: false });
    _.forEach(this.componentBtns, (compData) => {
      if (compData.cid == COMPONENT_TYPES.wb_btn) {
        let btn = compData.vueContainer.$refs.btn.$el;
        removeEvent(btn, "click", this.onBtnClick);
      }
    })
    this.componentBtns = null;
    this.relateEventCompId = null
  }
}
